<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
                xmlns:h="http://java.sun.com/jsf/html"  
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../templates/FoodSageTemplate.xhtml">

    <ui:define name="logout">
        <p:commandLink id="logoutLink" actionListener="#{touristLogoutManagedBean.doLogout}" value="#{bundle['login.logout.label']}" ajax="false" immediate="true" />
    </ui:define>

    <ui:define name="main_menu">
        <f:view beforePhase="#{itineraryChooseItineraryTypeManagedBean.initView}"/>
        <p:menubar model="#{itineraryChooseItineraryTypeManagedBean.touristMainMenuModel}"/>
    </ui:define>

    <ui:define name="nav_menu">
        <p:menu model="#{itineraryChooseItineraryTypeManagedBean.touristNavMenuModel}"/>
    </ui:define>

    <ui:define name="content">
        <f:view>
            <h:form id="formMain">
                <p:growl id="growl" showDetail="true" />
                <br/>
                <br/>
                <h:outputText value="Welcome back, #{purchaseGrouponManagerBean.tourist.tourist.firstName} #{purchaseGrouponManagerBean.tourist.tourist.lastName}" 
                              style="font-weight:bold; font-size:16px"/>
                <br/>
                <br/>
                <p:fieldset style="position:relative; width:950px">
                    <h2>YOUR ORDER</h2>
                    <p:separator/>
                    <h:panelGrid columns="6" cellpadding="10" rules="rows" style="text-align:left">
                        <h:outputText value="Description" style="font-weight:bold; font-size:12px"/>
                        <h:outputText value="Amount" style="font-weight:bold; font-size:12px"/>
                        <h:outputText value="" style="font-weight:bold; font-size:12px"/>
                        <h:outputText value="Single Amount" style="font-weight:bold; font-size:12px"/>
                        <h:outputText value="" style="font-weight:bold; font-size:12px"/>
                        <h:outputText value="Total Amount" style="font-weight:bold; font-size:12px"/>

                        <h:outputText value="#{purchaseGrouponManagerBean.selectedGroupon.groupon.name}" style="font-weight:bold; font-size:12px"/>
                        <h:outputText value="#{purchaseGrouponManagerBean.purchase.quantity}" style="font-weight:bold; font-size:12px"/>

                        <h:outputText value="X" style="font-weight:bold; font-size:12px"/>
                        <h:outputText value="$S #{purchaseGrouponManagerBean.selectedGroupon.groupon.offeredPrice}" style="font-weight:bold; font-size:12px"/>
                        <h:outputText value="=" style="font-weight:bold; font-size:12px"/>
                        <h:outputText value="$S #{purchaseGrouponManagerBean.totalAmount}" style="font-weight:bold; font-size:12px" id="totalAmount"/>

                    </h:panelGrid>
                </p:fieldset>
                <br/>
                <br/>
                <p:fieldset style="width:950px">
                    <h:outputText value="Step 2 : Provide your credit/debit card information" style="font-weight:bold; font-size:12px"/>
                    <p:ajaxStatus style="width:16px;height:16px;">
                        <f:facet name="start">
                            <h:graphicImage value="/images/buttons/ajax-loader-bar1.gif" />
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value="" />
                        </f:facet>
                    </p:ajaxStatus>
                    <p:messages />
                    <h:panelGrid columns="2" cellpadding="0">
                        <h:panelGrid columns="1" cellpadding="0" style="width:370px">
                            <h:outputText value="Name on card" style="font-weight:bold; font-size:12px"/>
                            <p:inputText value="#{purchaseGrouponManagerBean.nameOnCard}" id="nameOnCard"/>
                            <br/>
                            <h:outputText value="Card type" style="font-weight:bold; font-size:12px"/>
                            <h:selectOneMenu value="#{purchaseGrouponManagerBean.creditCardType}" id="cardType" >
                                <f:selectItem itemValue="MasterCard"></f:selectItem>
                                <f:selectItem itemValue="Visa"></f:selectItem>
                                <f:selectItem itemValue="Discover"></f:selectItem>                               
                            </h:selectOneMenu>
                            <br/>
                            <h:outputText value="Card number" style="font-weight:bold; font-size:12px"/>
                            <h:panelGrid columns="4" cellpadding="0">
                                <p:inputText value="#{purchaseGrouponManagerBean.creditCardNumberGroup1}" size="4" maxlength="4"/>
                                <p:inputText value="#{purchaseGrouponManagerBean.creditCardNumberGroup2}" size="4" maxlength="4"/>
                                <p:inputText value="#{purchaseGrouponManagerBean.creditCardNumberGroup3}" size="4" maxlength="4"/>
                                <p:inputText value="#{purchaseGrouponManagerBean.creditCardNumberGroup4}" size="4" maxlength="4"/>
                            </h:panelGrid>
                            <br/>
                            <h:panelGrid columns="2" cellpadding="0">
                                <h:outputText value="CVC/CVV" style="font-weight:bold; font-size:12px"/>
                                <p:graphicImage value="/images/buttons/question_mark_button.jpg" onclick="dialog1.show()"/>
                            </h:panelGrid>

                            <p:inputText value="#{purchaseGrouponManagerBean.CCV2}" size="3" maxlength="3"/>
                            <br/>
                            <h:outputText value="Valid until" style="font-weight:bold; font-size:12px"/>
                            <h:panelGrid columns="3" cellpadding="0">
                                <h:selectOneMenu value="#{purchaseGrouponManagerBean.expiryMonth}" id="expiryMonth" >
                                    <f:selectItem itemLabel="January" itemValue="01"></f:selectItem>
                                    <f:selectItem itemLabel="February" itemValue="02"></f:selectItem>
                                    <f:selectItem itemLabel="March" itemValue="03"></f:selectItem>
                                    <f:selectItem itemLabel="April" itemValue="04"></f:selectItem>
                                    <f:selectItem itemLabel="May" itemValue="05"></f:selectItem>
                                    <f:selectItem itemLabel="June" itemValue="06"></f:selectItem>
                                    <f:selectItem itemLabel="July" itemValue="07"></f:selectItem>
                                    <f:selectItem itemLabel="August" itemValue="08"></f:selectItem>
                                    <f:selectItem itemLabel="September" itemValue="09"></f:selectItem>
                                    <f:selectItem itemLabel="October" itemValue="10"></f:selectItem>
                                    <f:selectItem itemLabel="November" itemValue="11"></f:selectItem>
                                    <f:selectItem itemLabel="December" itemValue="12"></f:selectItem>                                   
                                </h:selectOneMenu>
                                <h:outputText value="/" style="font-weight:bold; font-size:12px"/>
                                <h:selectOneMenu value="#{purchaseGrouponManagerBean.expiryYear}" id="expiryYear" >
                                    <f:selectItems value="#{purchaseGrouponManagerBean.expiryYearList}"></f:selectItems>                             
                                </h:selectOneMenu>
                            </h:panelGrid>

                        </h:panelGrid>
                        <h:panelGrid columns="2" cellpadding="0">
                            <p:graphicImage value="/images/buttons/paypal_creditcard.jpg"/>
                            <p:graphicImage value="/images/buttons/paypal_verified.jpg"/>
                        </h:panelGrid>

                    </h:panelGrid>
                </p:fieldset>

                <p:dialog header="CVC/CVV/CID" widgetVar="dialog1" showEffect="bounce" hideEffect="explode" width="400" height="450">
                    <span class="toolTipText">
                        <br/><b style="font-size:14px">What is a Credit card Verification Value number (CVV/CVC/CID)?</b><br /><br />The Credit card Verification Value is a security feature which appears on every credit card. This number is used in order to ascertain the identity and to prevent fraud. It is located on the back panel of your card.<br /><br /><b style="font-size:14px">Where can I find the Credit card Verification Value number (CVV/CVC/CID)?</b><br /><br />They are the last 3 digits in the signature box on the card’s back panel.<br /><br /><img src="https://static.groupon.sg/s/v/cb4021048887/images/layout/visa_mastercard_cvv.png" alt="CVV" />&nbsp;
                    </span>
                </p:dialog>

                <h:panelGrid columns="2" columnClasses="column" cellpadding="5">
                    <p:commandButton id="back" value="Back" ajax="true" action="tourist/VisitorViewGroupon?faces-redirect=true"/>
                    <p:commandButton id="submitOrder" value="Submit Order" ajax="true" actionListener="#{purchaseGrouponManagerBean.submitOrderAndPaymentInformation}"/>
                </h:panelGrid> 
            </h:form>
        </f:view>
    </ui:define>
</ui:composition>